<template>
  <div class="refine_addlink">
    <h2>系统链接设置</h2>
    <el-form :label-position="labelPosition" label-width="100px" :model="formLabel">
      <el-form-item label="系统名称">
        <el-input v-model="formLabel.name" placeholder="请输入系统名称"></el-input>
      </el-form-item>
      <el-form-item label="系统链接">
        <el-input v-model="formLabel.url" placeholder="http://"></el-input>
      </el-form-item>
      <el-form-item label="背景图片">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="$config.FILE_UPLOAD_URL"
          :data='uploadobj'
          :file-list="fileList"
          :headers="headers"
          accept='.png,.jpg,.jpeg'
          :on-preview="handlePreview"
          :on-remove="uploadRemove"
          :limit="1"
          :before-upload="beforeAvatarUpload"
          :on-exceed="handleExceed"
          :on-success='uploadSuccess'>
          <el-button size="small" type="primary">上传</el-button>
          <div slot="tip" class="el-upload__tip">图片大小2MB以内，尺寸260*70</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editsure" class="sure">确认</el-button>
        <el-button class="cancel" @click="editcancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import linkService from '@/services/SystemLinkService'
  export default {
    data:function () {
      return {
        labelPosition: 'right',
        formLabel: {
          name: '',
          url: ''
        },
        uploadobj:{
          filename: '',
          mimeType: "image/jpeg",
          bus: 'link'
        },
        fileList:[],
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
      }
    },
    mounted(){
    },
    methods: {
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$alert('上传图片大小不能超过 2MB!','提示');
        }
        this.uploadobj.filename=file.name
        return isLt2M;
      },
      editsure(){
        if(!this.formLabel.name){
          this.$alert('系统名称必填', '提示' );
          return false;
        }
        if(!this.formLabel.url){
          this.$alert('网址必填', '提示' );
          return false;
        }
        // if(this.fileList.length===0){
        //   this.$alert('背景图片必传', '提示' );
        //   return false;
        // }

        if(this.formLabel.url.indexOf('.') ===-1){
          this.$alert('输入的地址不正确', '提示' );
          return false;
        }
        let url = [];
        for (let n of this.fileList) {
          url.push({name:n.name,url:n.url});
        }
        let params = {
          name: this.formLabel.name,
          url: this.formLabel.url,
          img: JSON.stringify(url),
        }
        linkService.create(params).then((res)=>{
          this.$alert('添加成功',{
            callback: action => {
              this.formLabel={
                name: '',
                url: ''
              };
              this.fileList = [];
              this.$router.go(-1);
            }
          });
        });
      },
      editcancel(){
        this.formLabel={
          name: '',
          url: ''
        };
        this.fileList = [];
        this.$router.go(-1);
      },
      uploadSuccess(res){
        this.fileList.push({name:res.data.name,url:res.data.link})
      },
      uploadRemove:function(res){
        var deleteItem=res.name;
        for(var n=0; n<this.fileList.length;n++){
          if(this.fileList[n].name.indexOf(deleteItem)!=-1){
            this.fileList.splice(n, 1);
          }
        }
      },
      handlePreview(file) {
      },
      handleExceed(files) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      }
    }
  };
</script>

<style lang="scss">
  .refine_addlink {
    display: block;
    min-height: 400px;

    h2{
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom:1px solid #eeeeee;
      font-weight: normal;
      font-size: 18px;
      color: #0062cd;
      padding-left:30px;
      box-sizing: border-box;
    }
    .el-form{
      width:465px;
      margin:20px auto;
      .el-form-item__content{
        line-height: 34px;
      }
      .el-input{
        width:300px;
        float:left;

        input{
          width: 300px;
          height: 34px;
          border-radius: 2px;
          border: solid 1px #dddddd;
          font-size:14px;
        }

      }
      label{
        font-size: 14px;
        line-height: 34px;
      }

    }
    .el-upload--text{
      float: right;
      width: 58px;
      height: 34px;
      border:none;
      border-radius: 2px;
      margin-left:5px;

      button{
        background-color: #0062cd;
        border-radius: 2px;
        border:none;
        padding:0;
        width: 58px;
        height: 34px;

      }
    }
    .el-upload__tip{
      width: 300px;
      height: 34px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      margin-top:0;
      padding: 0 15px;
      font-size: 14px;
      color: #b9b9b9;
      text-align: left;
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: block;
      margin-top: 28px;
      margin-top: -5px;
    }
    .el-upload-list__item:first-child{

    }
    .is-success{

    }
    .sure{
      width: 110px;
      height: 36px;
      background-color: #0062cd;
      border-radius: 4px;
      padding:0;
    }
    .cancel{
      width: 110px;
      height: 36px;
      border-radius: 4px;
      border: solid 1px #0062cd;
      padding:0;
      color:#0062cd;
    }
  }
</style>
